import 'package:flutter/material.dart';
import '../layout/layout_responsive.dart';



import 'package:provider/provider.dart';
import '../../providers/page_provider.dart';
import 'menus.dart';

class DrawerMenu extends StatefulWidget {
  DrawerMenu({Key? key}) : super(key: key);

  @override
  _DrawerMenuState createState() => _DrawerMenuState();
}

class _DrawerMenuState extends State<DrawerMenu> {
  int _currentIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _currentIndex = context.watch<PageProvider>().page;
    
    return Container(
      width: LayoutResponsive.isXs(context) ? 200 : 300,
      color: Theme.of(context).primaryColor,
      child: Drawer(
        elevation: 0,
        child: ListView(
          padding: EdgeInsets.all(0.0),
          children: <Widget>[
            Container(
              child: LayoutResponsive.isXs(context) || LayoutResponsive.isSm(context)
              ? 
              UserAccountsDrawerHeader(
                accountName: Text('张三丰'),
                accountEmail: Text('zhangsanfeng@163.com'), 
                onDetailsPressed: () {},
                currentAccountPicture: CircleAvatar(
                  backgroundImage: AssetImage('assets/images/flutter.jpg'),
                ),
                decoration: BoxDecoration(
                  // 背景图片
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage('assets/images/bg1.jpg')
                  )
                ),
              )
              : null
            ),

            ...List.generate(
              menus.length, (index) {
                return Container(
                  margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
                  decoration: index == _currentIndex
                  ? BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.deepPurple.shade200
                    )
                  : BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.grey.shade200
                    ),
                  child: LayoutResponsive.isMd(context)
                  ? 
                  ListTile(
                    onTap: () {
                      _changePage(index);
                    },
                    title: Icon(menus[index]['icon'], color: Colors.grey.shade700),
                  )
                  :
                  ListTile(
                    onTap: () {
                      _changePage(index);
                    },
                    leading: Icon(menus[index]['icon'], color: Colors.grey.shade700),
                    title: Text(menus[index]['title']),            
                    trailing: Icon(Icons.arrow_forward_ios, size: 16),
                  )
                );
              } 
            )
          ]
        )
      )
    );
  }

  void _changePage(int i) {
    // 设置当前页面
    Provider.of<PageProvider>(context, listen: false).set(i);

    if (i != _currentIndex) {
      setState(() {
        _currentIndex = i;
      });
    }
  }

  // Widget _renderMenuItem(Map item) {
  //   return Container(
  //     child: ListTile(
  //       leading: Icon(item['icon']),
  //       title: Text(item['title']),
  //       onTap: _changePage(int i), 
  //       trailing: Icon(Icons.arrow_forward_ios),
  //     ),
  //   );
  // }
}
